<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script th:src="@{/js/jquery-1.11.3.min.js}"></script>
    <script>
        function getxx(id) {
            $.post("/getxxx",{"id":id},function (json) {
                $("div").css("display","block");
                $("div").text(json);
            })
        }
        function nextpage(npage) {
            $("div").text("");//清空详细信息
            $("button").remove();//删除所有的按钮
            $("tr:not(tr:first)").remove();//除去第一个tr节点都删除
            var serialize = $("#myform").serialize()+"&pageindex="+npage;//表单序列化并将页数拼接
            $.getJSON("/found",serialize,function (data) {

                $.each(data.content,function (i, item) {
                    var sex="";//数据库中的sex为1和零，准备转换
                    if (item.sex == 0) {//如果是0为男
                        sex="男"
                    } else{//否则是女
                        sex="女"
                    }
                    //插入信息
                    var tr=$("<tr>\n" +
                        "<td><input type=\"radio\" name=\"id\" onclick=\"getxx("+item.id+")\">"+item.id+"</td>\n" +
                        "<td>"+item.name+"</td>\n" +
                        "<td>"+sex+"</td>\n" +
                        "<td><img src=\"/img/"+item.headUrl+"\" height=\"50\" width=\"50\"></td>\n" +
                        "<td>"+item.profession+"</td>\n" +
                        "</tr>");
                    $("table").append(tr);
                })
                var prev;//上一页，
                var next;//下一页，
                var pages;//页码
                if (data.first == false)
                    prev=$("<button onclick=\"nextpage(parseInt("+(data.number)+"))\">上一页</button>");
                if (data.last == false)
                    next=$("<button onclick=\"nextpage(parseInt("+(data.number+2)+"))\">下一页</button>");
                for (var i = data.totalPages; i >0; i--) {
                    pages=$("<button id='pages' onclick=\"nextpage("+i+")\">"+i+"</button>");
                    $("table").after(pages);
                }
                $("button[id='pages']:first").before(prev);
                $("button[id='pages']:last").after(next);
            })
        }
        $(function () {
            nextpage(1)
        })
    </script>
</head>
<body>
    <form id="myform">
        姓名: <input name="name" type="text">
        性别: <select name="sex">
        <option value="-1">全部</option>
        <option value="0">男</option>
        <option value="1">女</option>
    </select>
        <input type="button" onclick="nextpage(1)" value="搜索">
    </form>
    <table border="1px solid">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>头像</td>
            <td>职业</td>
        </tr>
    </table>
    <div style="width: 200px;height: 200px;display: none"></div>
</body>
</html>